<!--
 * @ModuleName: 
 * @Author: yuetchn@163.com
 * @LastEditTime: 2023-01-10 13:04:19
-->
<template>
  <div v-loading="treeLoading" class="permission_box">
    <div class="nav">
      <div class="keyword">
        <el-input v-model.trim="treeKeyword" placeholder="过滤..." clearable />
        <el-button style="margin-left:8px;" @click="gettreeData">
          <g-svg-icon name="refresh" />
        </el-button>
      </div>
      <div class="submit">
        <el-button type="primary" @click="submitBindApi">保存</el-button>
      </div>
    </div>
    <div class="body">
      <el-tree ref="treeRef" :data="treeData" :filter-node-method="filterTree" default-expand-all node-key="id" show-checkbox />
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted, watch } from "vue";
import { ElTree } from "element-plus"
import { message } from "ant-design-vue";
import { GetApis } from "@/api/system/api"
import { GetRoleApi, PostRoleApi } from "@/api/system/role";
import { useSearchForm } from "@/hooks"

interface TreeNode {
    id:any,
    label: string;
    children:TreeNode[]
}

const props = defineProps({
  id: {
    type: Number,
    default: 0,
  },
})

const treeLoading = ref(false)
const treeKeyword = ref("");
const treeRef = ref < InstanceType < typeof ElTree >>()
const treeData = ref < any[] >([]);

onMounted(async () => {
  init();
});

watch(() => treeKeyword.value, (v) => {
  treeRef.value?.filter(v)
})

const init = async () => {
  try {
    treeLoading.value = true
    await gettreeData();
    const { data } = await GetRoleApi(props.id);
    data.data.api_ids.forEach((f: number) => {
      const node = treeRef.value?.getNode(f);
      if (node?.isLeaf) {
        treeRef.value?.setChecked(f, true, false)
      }
    })
  } finally {
    treeLoading.value = false
  }
}

// 获取菜单树
const gettreeData = async () => {
  try {
    treeLoading.value = true
    const { data } = await GetApis(useSearchForm(undefined, 99999));
    // 分组
    const group:Record<string, TreeNode> = {}

    data.data.list.forEach(f => {
      if (!group[f.group]) {
        group[f.group] = {
          label: f.group,
          id: "g",
          children: [],
        }
      }
      group[f.group].children.push({
        label: f.remark,
        id: f.id,
        children: [],
      })
    })

    treeData.value = Object.values(group)
  } finally {
    treeLoading.value = false
  }
};

// 过滤树
const filterTree = (value: string, data: { label: string;id: number } | any) => {
  if (!value) return true;
  return data.label.includes(value);
};

const submitBindApi = async () => {
  try {
    treeLoading.value = true;
    const { data } = await PostRoleApi({
      role_id: props.id,
      api_ids: treeRef.value?.getCheckedKeys().filter(f => f !== "g") as number[],
    })
    message.success(data.msg);
  } finally {
    treeLoading.value = false;
  }
}

</script>
<style lang="scss" scoped>
  .permission_box {
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;

    .nav {
      padding-bottom: 15px;
      display: flex;
      align-items: center;
      flex: 0 0 auto;

      .keyword {
        flex: 1;
        display: flex;
        align-items: center;
      }

      .submit {
        flex: 0 0 auto;
        margin-left: 30px;
        text-align: right;
        width: 150px;
      }
    }

    .body {
      flex: 1;
      overflow:auto;
    }
  }
</style>